<template>
  <div class="status-card-container">
    <el-card>
      <template #header>
        <span class="card-header">{{ title }}</span>
      </template>
      <div class="card-content">
        <div class="chart-container">
          <el-scrollbar class="left">
            <div
              v-for="(item, index) in powerChartData"
              :key="index"
              :class="powerClass[index]"
              class="item"
              @click="changeChart(index)"
            >
              <div class="title">第{{ index + 1 }}路供电</div>
              <div class="data">电压: {{ item[item.length - 1].vol }}V</div>
              <div class="data">电流: {{ item[item.length - 1].cur }}A</div>
            </div>
          </el-scrollbar>
          <div class="right">
<!--            <div class="chart" style="background-color: #ffd04b"></div>-->
            <VolCurChart :data="powerChartData[displayChartIndex]" class="chart"/>
<!--            <div class="chart" style="background-color: #ffd04b">-->
<!--              <VolCurChart :data="powerChartData[displayChartIndex]" style="width: 100%; height: 100%"/>-->
<!--            </div>-->
          </div>
        </div>
        <el-divider class="divider"/>
        <div class="status-container">
          <div class="item">
            <div>同步状态1: 正常</div>
          </div>
          <div class="item">
            <div>同步状态2: 正常</div>
          </div>
          <div class="item">
            <div>总线状态1: 正常</div>
          </div>
          <div class="item">
            <div>总线状态2: 正常</div>
          </div>
          <div class="item">
            <div>击发状态1: 正常</div>
          </div>
          <div class="item">
            <div>击发状态2: 正常</div>
          </div>
          <div class="item">
            <div>测试状态1: 正常</div>
          </div>
          <div class="item">
            <div>测试状态2: 正常</div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "StatusCard"
}
</script>

<script setup>
import VolCurChart from './VolCurChart'
import {ref, computed, defineProps} from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '标题'
  }
})
let powerChartData = ref([])
const displayChartIndex = ref(0)
const powerClass = computed(() => {
  const returnClass = []
  for (let i = 0; i < powerChartData.value.length; i++) {
    returnClass.push({
      active: displayChartIndex.value === i
    })
  }
  return returnClass
})
const changeChart = index => {
  displayChartIndex.value = index
}

for (let i = 0; i < 3; i++) {
  const temp = []
  for (let j = 0; j < 1000; j++) {
    const time = Date.now()
    temp.push({
      time: time + 1000 * j,
      vol: 10 - i,
      cur: 1.3 - 0.2 * i
    })
  }
  powerChartData.value.push(temp)
}
</script>

<style lang="sass" scoped>
.status-card-container
  width: 100%
  height: 100%

  .card-header
    font-size: 18px
    font-weight: bold

  .card-content
    .divider
      margin-top: 10px
      margin-bottom: 15px

    .chart-container
      width: 100%
      height: 100%
      display: flex
      //background-color: honeydew

      .left
        width: 110px
        height: 200px
        margin: 5px 5px 5px 0

        .active
          background-color: #cde8ff

        .item
          height: 78px
          box-sizing: border-box
          transition: 0.2s
          cursor: pointer
          border: 1px solid rgba(0, 0, 0, 0.27)
          margin-bottom: 5px
          padding: 10px
          margin-right: 10px

          &:hover
            border: 1px solid #1881bd
            background-color: #f1f6fa

          .title
            font-size: 16px
            margin-bottom: 8px

          .data
            color: #707070
            font-size: 12px
            margin-top: 5px

      .right
        width: 0
        flex: 1
        //background-color: #67c23a

        .chart
          width: 100%
          height: 100%

    .status-container
      $width: 120px
      display: grid
      grid-template-columns: repeat(auto-fill, $width)
      grid-gap: 5px
      justify-items: center
      align-items: center
      justify-content: space-around

      .item
        width: $width
        height: 30px
        display: flex
        justify-content: center
        align-items: center
        border-radius: 4px
        color: #fff
        background-color: #67C23A


//.status-container
//  display: flex
//  .item
//    margin-right: 20px
</style>
